<template>
	<view class="order-useCoupon">
		<view class="order-useCoupon-item" @click="useCouponShow=true">
			<view class="left">优惠券</view>
			<view class="right u-text-right">
				<text :class="[useCouponVO.useCouponList.length>0?'u-type-error':'u-tips-color','u-font-24','u-m-r-8']">{{name}}</text>
				<u-icon name="arrow-right" color="#BFBFBF" size="24"></u-icon>
			</view>
		</view>
		<u-popup v-model="useCouponShow" mode="bottom" border-radius="16" :closeable="true" close-icon="close-circle" close-icon-size="48" close-icon-color="#BFBFBF">
			<view class="useCouponShow">
				<view class="header">优惠券</view>
				<view class="tab">
					<view v-for="(item,index) in list" :key="index" class="u-flex u-row-center">
						<view :class="['tabItem',actTab==index?'actTab':'']" @click="actTab=index">
							{{item}}({{index==0?useCouponVO.useCouponList.length:useCouponVO.notUseCouponList.length}})
						</view>
						<view class="line" v-if="actTab==index"></view>
					</view>
				</view>
					<swiper class="swiper-box" :current="actTab" @transition="transition" @animationfinish="animationfinish">
						<swiper-item class="swiper-item" v-for="(v, i) in list" :key="i">
						 <scroll-view :scroll-y="true" class="scroll-Y">
							<u-radio-group v-if="i==0" class="radio" v-model="value" @change="radioGroupChange">
								<view class="container u-m-l-20 u-m-r-20 u-m-t-20" v-for="(item, index) in useCouponVO.useCouponList" :key="index">
									<coupon :coupon="item" :type="6" @afterSave="afterSave"/>
									<view class="couponRadio">
										<u-radio :name="index">
											<view style="width: 100rpx;height: 100rpx;border-radius: 50%; position: absolute;left: -34rpx;top:-28rpx;">
											</view>
										</u-radio>
									</view>
								</view>
								<u-empty v-if=" i==0 && useCouponVO.useCouponList.length==0" mode="list"></u-empty>
							</u-radio-group >
							<view v-if="i==1"  class="container u-m-l-20 u-m-r-20 u-m-t-20" v-for="(item, index) in useCouponVO.notUseCouponList" :key="index">
								<coupon :coupon="item" :type="7" @afterSave="afterSave"/>
							</view>
							<u-empty v-if="i==1 && useCouponVO.notUseCouponList.length==0" mode="list"></u-empty>
				     </scroll-view>
						</swiper-item>
					</swiper>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import coupon from '@/components/cart/coupon.vue'
	export default{
		components:{ coupon },
		props:{
			useCouponVO:{
				type:Object,
				default:()=>{
					return {
						useCouponList:[],
						notUseCouponList:[]
					}
				}
			}
		},
		data(){
			return {
				value:0,
				actTab:0,
				useCouponShow:false,
				list:['可用优惠券', '不可用优惠券']
			}
		},
		computed:{
			name(){
				return this.useCouponVO.useCouponList.length>0? parseFloat(this.useCouponVO.useCouponList[this.value].activityRule.couponAmount) == 0?'不使用优惠券' : '已选一张，减'+parseFloat(this.useCouponVO.useCouponList[this.value].activityRule.couponAmount)+'元':'无可用优惠券'
			}
		},
		methods:{
			radioGroupChange(e){
				this.value = e
				this.$emit('checkCoupon', e)
				this.useCouponShow=false
			},
			transition(e){
				// console.log(e)
			},
			animationfinish({detail}){
				this.actTab = detail.current
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order-useCoupon{
		background-color: #fff;
		border-radius: 16rpx;
		.useCouponShow{
			overflow: hidden;
			.header{
				color: $u-main-color;
				text-align: center;
				font-weight: bold;
				line-height: 120rpx;
				font-size: 32rpx;
			}
			.tab{
				display: flex;
				justify-content: space-around;
				position: relative;
				line-height: 88rpx;
				.actTab{
					color: $u-type-primary;
				}
				.line{
					width: 56rpx;
					height: 6rpx;
					background-color: $u-type-primary;
					position: absolute;
					bottom:0;
				}
			}
			.swiper-box{
				height: 55vh;
				margin: 40rpx 0;
				overflow: hidden;
			}
			.swiper-item{
				margin-bottom: 40rpx;
			}
			.scroll-Y{
				height: 100%;
				.container{
					position: relative;
					width: 94vw;
					.couponRadio{
						position: absolute;
						top: 70rpx;
						right: 50rpx;
					}
				}
			}
		}
		.order-useCoupon-item{
			height: 88rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom:1rpx solid $u-bg-color ;
			.left{
				font-weight: bold;
				font-size: 24rpx;
				color: $u-main-color;
				width: 140rpx;
			}
			.right{
				width: 510rpx;
			}
		}
		.item:last-child{
			border:none;
		}
	}
</style>
